<extend name="Base/common"/>
<block name="body">
	<div class="container">
		<div class="nav">
		    <img src="__IMG__/img_1.png" alt="" id="show">			
			<h3>订单列表</h3>
		</div>
		<ul class="order">
			<li>
				<span class="order-span1">交易日期</span>
				<span class="order-span2">商品名称</span>
				<span class="order-span3">方向</span>
				<span class="order-span4">盈利</span>
				<span class="order-span5">操作</span>
			</li>
			<li><span class="order-span1">2016-02-02</span>
				<span class="order-span2">IF主力合约</span>
				<span class="order-span3">方向</span>
				<span class="order-span4">盈利</span>
				<span class="order-span5" >
					<a class="order-a" href="#" data-click=0>详情</a>
				</span>
				<div class="order-maos">
					<table class="order-table">
						<tr><td>开盘价格</td><td>开盘价格</td><td>开盘价格</td><td>当前价格</td><td></td></tr>
						<tr><td>23000</td><td>23000</td><td>23000</td><td>23000</td><td><a class="order-a" href="#" data-id='18'>平仓</a></td></tr>
						
					</table>
				</div>
			</li>
		</ul>
		<!--<span>开盘价格</span><span>当前价格</span>-->
		<!--翻页  开始-->
		<div class="flip-pag">
			<a href="#" class="flip-leftbutton"> < 上一页 </a>
			<div class="flip-centerimport">
				<div class="flip-import"><span>12</span><span>/89</span></div>
				<input class="flip-input" type="text" pattern="[0-9]*"/>
				<a class="flip-go" href="#">GO</a>
			</div>
			<a href="#" class="flip-rightbutton"> < 下一页 </a>
		</div>
		<!--翻页 结束-->
		
		<!--弹出开始-->
		<div class="dailog_mask"></div>
		<div class="order-mode" data-id=''>
			<div class="order-modediv">
				平仓价
				<img class="order-modeimg" src="__IMG__/img_22.png" />
			</div>
			
			<input class="order-modeinput" value="230000" type="text" pattern="[0-9]*" disabled/>
			<p class="order-p">时间不对</p>
			<a class="order-modea" href="#">确认</a>
		</div>
		<!--弹出结束-->
		
	</div>
	

<script type="text/javascript">
//平仓弹窗
$('.order-table').find('.order-a').each(function(){
	$(this).click(function(){
		$('.dailog_mask').toggle();
		$('.order-mode').toggle().attr('data-id',$(this).attr('data-id'));
	});
})
$('.dailog_mask').click(function(){
	$('.order-mode').toggle();
	$(this).toggle();
})
$('.order-modeimg').click(function(){
	$('.order-mode').toggle();
	$('.dailog_mask').toggle();
})

//点击展开详情
$('.order-span5').find('.order-a').each(function(){
	$(this).click(function(){
		var clik=$(this).attr('data-click');
		if(clik==0){
			$(this).parent().parent().find('.order-maos').css('display','block')
			$(this).css('background','#4c535e');
			$(this).html('关闭');
			$(this).attr('data-click','1');
		}else{
			$(this).parent().parent().find('.order-maos').css('display','none')
			$(this).css('background','#de362a');
			$(this).html('详情');
			$(this).attr('data-click','0');
		}
			
	})
})




//翻页  开始
$('.flip-import').click(function(){
	$(this).css('display','none');
	$('.flip-input').css('display','inline-block');
	$('.flip-input').focus();
})
$('.flip-go').click(function(){
	$('.flip-input').css('display','none');
	$('.flip-import').css('display','inline-block');
})
//翻页  结束




var p="{$other.p}";//当前显示条数
//if(p=="") p=1;
 var stop=true;//触发开关，防止多次调用事件
 $(window).scroll(function() {  
      //当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载.
      if ($(this).scrollTop() + $(window).height() + 100 >= $(document).height() && $(this).scrollTop() > 100) {  
          
          if(stop==true){
              stop=false;
              p=p+1;//请求加载的条数  
              canshu="?t={$other.t}&p="+p+"&cid={$other.cid}";//拼连接
               //加载提示信息
               $(".order").append("<li class='ajaxtips'><div style='font-size:2em;text-align: center;'>Loding.....</div></li>");
               $.get("__URL__/nextpage"+canshu,function(data){
                   $(".ajaxtips").remove();
                   $(".order").append('<li><span>'+data[0]+'</span><span>'+data[1]+'</span><span>'+data[2]+'</span><span>'+data[3]+'</span></li>');//把新的内容加载到内容的后面
                   stop=true;
               })
         }
      }  
  }); 
</script>
</block>